<template>
	<button class="im-button" @click="openModal">
		<u-icon name="chat" color="#999" size="33"></u-icon>
		<u-popup :show="show" @close="close" >
			<view class="im-button-content">
				<u--text type="info" text="服务时间:08:00~22:00" size="17"></u--text>
				<!-- <u--text type="info" text="门店名称:靓鲸洗干洗店(越秀店)" size="17"></u--text> -->
				<!-- <u--text type="info" text="门店地址:广东省广州市中山五路68号2层210" size="17"></u--text> -->
				<u-gap height="30rpx"></u-gap>
				<button open-type="im" data-im-id="42260374755">在线客服</button>
				<u-gap height="30rpx"></u-gap>
				<button type="primary" @click="tapMakePhoneCall">电话客服</button>
			</view>
		</u-popup>
	</button>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		},
		methods: {
			close() {
				this.show = false
			},
			openModal() {
				this.show = true
			},
			tapMakePhoneCall() {
				tt.makePhoneCall({
					phoneNumber: "4006618818",
					success(res) {
						// 调用成功 makePhoneCall:ok
						console.log("调用成功", res.errMsg);
					},
					fail(res) {
						// 调用失败 makePhoneCall:fail
						console.log("调用失败", res.errMsg);
					},
				});
			},
		}
	}
</script>

<style lang="scss">
	.im-button {
		position: fixed;
		bottom: 180rpx;
		right: 40rpx;
		margin: 0;
		width: 100rpx;
		height: 100rpx;
		box-sizing: border-box;
		border-radius: 50rpx;
		border: none;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 0 20rpx rgba(30, 72, 111, 0.2);

		&:after {
			border: none;
		}
		
		&-content {
			padding: 30rpx;
		}
	}
</style>